<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="search-div">
      <el-row>
        <el-col :span="13"
          ><div class="grid-content bg-purple">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入催化剂型号"
              clearable
              @keyup.enter="doSearch"
              style="width: 450px"
            />
            <el-button
              type="primary"
              :icon="Search"
              style="margin-left: 10px"
              @click="doSearch()"
            ></el-button></div
        ></el-col>
        <el-col :span="7" class="center-content"></el-col>
        <el-col :span="3"
          ><div class="grid-content bg-purple">
            <el-button
              type="primary"
              plain
              @click="handleImport"
              v-hasPermi="['catalyzer:catalyzerData:add']"
              >催化剂导入</el-button
            >
            <el-button
              type="success"
              v-hasPermi="['catalyzer:catalyzerData:add']"
              @click="addProject()"
              >添加</el-button
            >
          </div></el-col
        >
      </el-row>
    </div>
    <div class="table-div">
      <div class="scrollable-table">
        <Pagetable
          :data="showProjectList"
          :columns="columns"
          :initialPageSize="10"
        >
          <template #actions="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)"
              >详情</el-button
            >
            <el-popconfirm
              title="确定要删除当前催化剂吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleConfirm(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  v-hasPermi="['catalyzer:catalyzerData:remove']"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </Pagetable>
      </div>
    </div>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="downloadFile"
              >下载模板</el-link
            >
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-drawer
      :with-header="false"
      v-model="drawerVisible"
      :direction="rtl"
      :close-on-click-modal="false"
      class="drawer-with-footer"
      size="25%"
    >
      <div style="height: calc(100% - 60px); overflow-y: auto">
        <el-row class="row">
          <el-col :span="24">模块尺寸：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="2"></el-col>
          <el-col :span="1">L：</el-col>
          <el-col :span="1"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginModuleL"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.params.endModuleL"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="2"></el-col>
          <el-col :span="1">W：</el-col>
          <el-col :span="1"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginModuleW"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endModuleW"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="2"></el-col>
          <el-col :span="1">H：</el-col>
          <el-col :span="1"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginModuleH"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endModuleH"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">每层净高度：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginCatalystsH"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endCatalystsH"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">模块毛重：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginModuleKg"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endModuleKg"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">开孔率：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginTrepanRate"
              placeholder="%"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endTrepanRate"
              placeholder="%"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">波纹宽度：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginRippleW"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endRippleW"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">波纹高度：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginRippleH"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endRippleH"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">波纹板厚度：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginRippleThickness"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endRippleThickness"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">平板厚度：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginPlateThickness"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endPlateThickness"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">节距：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginPitch"
              placeholder="mm"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endPitch"
              placeholder="mm"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">磨损率：</el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4"></el-col>
          <el-col :span="20">
            <el-input
              v-model="formDialog.beginWearRate"
              placeholder="%kg"
              class="input"
            >
            </el-input>
            —
            <el-input
              v-model="formDialog.endWearRate"
              placeholder="%kg"
              class="input"
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div class="drawer-footer">
        <el-button type="primary" @click="searchDeatil()">筛选</el-button>
        <el-button @click="drawerVisible = false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import http from "@/utils/ajaxUtils";
import { onMounted } from "vue";
import router from "@/router";
import { ref } from "vue";
import { ElMessage, ElPopover, ElButton } from "element-plus";
import Pagetable from "@/components/MSTN/pagetable.vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  projectName: undefined,
});

const allProjectList = ref([]);
const showProjectList = ref([]);

/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData",
});

//筛选抽屉
const drawerVisible = ref(false);
const formDialog = ref({}); //抽屉数据源

const columns = [
  { prop: "catalystsName", label: "催化剂名称" },
  { prop: "categoryName", label: "催化剂类型号" },
  { prop: "moduleName", label: "模块型号" },
  { prop: "moduleSize", label: "模块尺寸(mm)" },
  { prop: "catalystsH", label: "每层高度(mm)" },
  {
    prop: "actions",
    label: "操作",
    width: 250,
    slot: "actions",
  },
];

/** 导入按钮操作 */
function handleImport() {
  upload.title = "催化剂导入";
  upload.open = true;
}

//导出
function downloadFile() {
  const link = document.createElement("a");
  link.href = "/download/data.xlsx";
  link.download = "催化剂导入模板.xlsx";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  const formData = new FormData();
  formData.append("file", file.raw); // 注意是 file.raw

  request({
    url: "/catalyzer/catalyzerData/upload",
    method: "post",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: "Bearer " + getToken(),
    },
  }).then((response) => {
    if (response.code == 200) {
      upload.open = false;
      upload.isUploading = false;
      proxy.$refs["uploadRef"].handleRemove(file);
      ElMessage.success("导入成功!");
    }
  });
};

/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
  getList();
}

function getList() {
  request({
    url: "/catalyzer/catalyzerData/list",
    method: "get",
    params: {},
  }).then((response) => {
    console.log(response);
    if (response.rows.length > 0) {
      allProjectList.value = response.rows;
      showProjectList.value = response.rows;
    }
  });
}

//搜索按钮
function doSearch() {
  showProjectList.value = allProjectList.value.filter((item) => {
    return item.catalystsName.includes(queryParams.value.projectName);
  });
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    projectName: undefined,
    status: [],
  };
  showProjectList.value = allProjectList.value;
}

function handleEdit(row) {
  router.push(`/catalyzer/detailCatalyzer/${row.catalystsId}`);
}

//添加项目
function addProject() {
  router.push(`/catalyzer/editCatalyzer/0`);
}

//删除按钮
const handleConfirm = (row) => {
  http;
  request({
    url: "/catalyzer/catalyzerData/" + row.catalystsId,
    method: "delete",
    params: {},
  }).then((response) => {
    ElMessage.success("删除成功！");
    getList();
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.drawer-with-footer {
  position: relative;
  height: 100%;
}

.drawer-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  padding-bottom: 10px;
  z-index: 10;
  box-shadow: 0 -2px 8px #f0f1f2;
  height: 50px;
  line-height: 60px;
}
.input {
  width: 100px;
}
.row {
  margin-bottom: 10px;
}
.app-container {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-div {
  height: 7%;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.table-div {
  height: calc(90% - 20px);
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.scrollable-table {
  overflow-y: auto; /* 启用垂直滚动条 */
  flex-grow: 1;
  height: 100%;
}

.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保高度占满父容器 */
}
</style>
